<template>
  <div class="app-container">
    <div class="processEdit">
      <div class="topbar">
        <div class="title">{{ config.configName }}</div>
        <div class="action"><el-button type="primary" size="mini">保存</el-button></div>
      </div>
      <div class="body">
        <div class="start"><span class="txt">开始</span></div>
        <div class="list">
          <div class="item">
            <div class="box">
              <div class="title">发起</div>
              <div class="content">当前发起人</div>
              <div class="auditType">提交</div>
            </div>
            <div class="add"><i class="icon el-icon-plus" style="font-size: 16px;"></i></div>
          </div>
          <div class="item" v-for="item in list" :key="item.id">
            <div class="box">
              <div class="title">{{item.name}}</div>
              <div class="content"><span><!----><span
                    class="xhl-wx-work-open-data">欧科</span></span></div>
              <div class="auditType">单人审批</div>
              <i aria-hidden="true" class="iconfont remove el-icon-close" style="font-size: 16px;"></i>

            </div>
            <div class="add">
              <i class="icon el-icon-plus" style="font-size: 16px;"></i>
            </div>
          </div>
        </div>
        <div class="end"><span class="txt">结束</span></div>
      </div>

    </div>

    <node-edit ref="edit" :config="config"></node-edit>

  </div>
</template>

<script>

import NodeEdit from './nodeEdit.vue';
import { getAssetAuditConfig } from "@/api/asset/assetAuditConfig";

import { listAssetAuditConfigNode } from "@/api/asset/assetAuditConfigNode";

export default {
  name: "AssetAuditConfigNode",
  components: { NodeEdit },
  data() {
    return {
      config: {
        id: null,
        configName: null,
      },
      list: []
    }
  },
  mounted() {
    this.config.id = this.$route.params.configId;
    this.getInfo();
    this.getList();
  },
  methods: {

    getInfo() {
      getAssetAuditConfig(this.config.id).then(response => {
    
        this.config = response;
      });
    },

    /** 查询资产审批配置列表 */
    getList() {
      const query = {
        configId: this.config.id
      };
      listAssetAuditConfigNode(query).then(response => {
        this.list = response;
      });
    },
  }
};
</script>

<style>

.processEdit {
  height: 100%;
}

.processEdit .topbar {
  width: 100%;
  height: 40px;
  background-color: #fff;
  border-bottom: 1px solid #dbdcdd;
  box-sizing: border-box;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.processEdit .body {
  height: 100%;
  padding: 50px 10px 10px;
  box-sizing: border-box;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #F0F2F5;
}

.processEdit .body .start {
    width: 240px;
    height: 120px;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    position: relative;
    z-index: 5;
}

.processEdit .body .start:after {
    content: "";
    width: 2px;
    height: 100%;
    background-color: #b3bfcb;
    transform: translateX(-50%);
    position: absolute;
    top: 0;
    left: 50%;
    z-index: -1;
}

.processEdit .body .list {
    width: 240px;
}

.processEdit .body .list .item {
    width: 100%;
    height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 5;
}

.processEdit .body .list .item:after {
    content: "";
    width: 2px;
    height: 100%;
    background-color: #b3bfcb;
    transform: translateX(-50%);
    position: absolute;
    top: 0;
    left: 50%;
    z-index: -1;
}

.processEdit .body .list .item .box {
    width: 100%;
    height: 96px;
    background-color: #fff;
    box-shadow: 0 6px 6px 0 rgba(33,43,54,.12);
    border-radius: 8px;
    box-sizing: border-box;
    padding: 10px 16px;
    cursor: pointer;
    position: relative;
}

.processEdit .body .list .item .box .title {
    font-size: 14px;
    font-weight: 700;
    color: #0b1019;
}

.processEdit .body .list .item .box .auditType, .processEdit .body .list .item .box .content {
    height: 18px;
    line-height: 18px;
    font-size: 12px;
    color: #626262;
    margin-top: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.processEdit .body .list .item .box .remove {
    font-weight: 700;
    color: rgba(0,0,0,.3);
    position: absolute;
    top: 8px;
    right: 8px;
}

.processEdit .body .list .item .add {
    width: 24px;
    height: 24px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 3px 6px rgba(0,0,0,.1);
    margin-top: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.processEdit .body .list .item .add:hover {
    background-color: #005bf5;
}

.processEdit .body .list .item .add:hover .icon {
    color: #fff;
}

.processEdit .body .start .txt {
    width: 50px;
    height: 50px;
    font-size: 12px;
    font-weight: 700;
    color: #005bf5;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.processEdit .body .end {
    width: 240px;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
}

.processEdit .body .end .txt {
    width: 50px;
    height: 50px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background-color: #005bf5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

</style>
